<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('登录配置列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form class="form-horizontal m" id="formId">
                <div class="select-list">
                    <ul>
                        <li class="col-sm-1">
                            <label>get参数：</label>
                        </li>
                        <li class="col-sm-5">
                            <textarea id="getUrl" style="height:150px" class="form-control">/xxx/getyyy?username=abc&password=abc123&age=20&type=get</textarea>
                        </li>
                        <li class="col-sm-1">
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="doTranslateGet()">转换</a>
                        </li>
                        <li class="col-sm-4">
                            <textarea id="targetGetUrl" style="height:150px" class="form-control"></textarea>
                        </li>
                    </ul>
                    <ul>
                        <li class="col-sm-1">
                            <label>表单参数：</label>
                        </li>
                        <li class="col-sm-5">
                            <textarea id="formParam" style="height:150px" class="form-control">username: abc
password: abc123
age: 20
type: form</textarea>
                        </li>
                        <li class="col-sm-1">
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="doTranslateForm()">转换</a>
                        </li>
                        <li class="col-sm-4">
                            <textarea id="targetFormParam" style="height:150px" class="form-control"></textarea>
                        </li>
                    </ul>
                    <ul>
                        <li class="col-sm-1">
                            <label>map参数：</label>
                        </li>
                        <li class="col-sm-5">
                            <textarea id="mapParam" style="height:150px" class="form-control">{username=abc, password=abc123, age=20, type=map}</textarea>
                        </li>
                        <li class="col-sm-1">
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="doTranslateMap()">转换</a>
                        </li>
                        <li class="col-sm-4">
                            <textarea id="targetMapParam" style="height:150px" class="form-control"></textarea>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    function doTranslateGet() {
        var getParam = $("#getUrl").val();
        var pos = getParam.indexOf("?");
        //如果不含?, 则pos=-1, pos+1正好为0
        getParam = getParam.substring(pos+1, getParam.length);
        var ret = doTranslate(getParam);
        $("#targetGetUrl").val(ret);
    }
    
    function doTranslateForm() {
        var formParam = $("#formParam").val();
        var ret = doTranslate(formParam);
        $("#targetFormParam").val(ret);
    }

    function doTranslateMap(){
        var mapParam = $("#mapParam").val();
        var ret = doTranslate(mapParam);
        $("#targetMapParam").val(ret);
    }

    function doTranslate(fullStr){
        if(fullStr.indexOf("{") == 0 && fullStr.lastIndexOf("}") == fullStr.length-1){
            fullStr = fullStr.substring(1, fullStr.length-1);
        }
        var ret = "{";
        var array = fullStr.split("\n")
        for (var i=0; i < array.length; i++) {
            var line = array[i];
            var subArray = line.split("&");
            for(var j=0; j < subArray.length; j++) {
                var token = subArray[j];
                var subToken = token.split(",");
                for(var k=0; k<subToken.length; k++) {
                    var str = subToken[k];
                    pos = str.indexOf(":");
                    if (pos < 0) {
                        pos = str.indexOf("=");
                    }
                    var key = str.substring(0, pos).trim()
                    if (key == '') {
                        continue;
                    }
                    if(key.indexOf('"') != 0 || key.lastIndexOf('"') != key.length-1){
                        key = '"' + key + '"';
                    }

                    var v = str.substring(pos + 1, str.length).trim();
                    if (isNaN(v) && 'TRUE' != v.toUpperCase() && 'FALSE' != v.toUpperCase()
                        && (v.indexOf('"') != 0 || v.lastIndexOf('"') != v.length-1)) {
                        v = '"' + v + '"';
                    }

                    if (ret.length > 1) {
                        ret += ',\n';
                    }
                    ret += key + ':' + v;

                }
            }
        }
        ret += '}';
        return ret;
    }
</script>
</div>
</body>
</html>